<template>
  <div class="form-design">
    <FormDesignBar />
    <div class="container">
      <CardPanel />
      <FormDesignPreview />
      <PropertyPanel />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import FormDesignBar from '@/views/formDesign/components/FormDesignBar.vue';
import CardPanel from '@/views/formDesign/components/CardPanel.vue';
import FormDesignPreview from '@/views/formDesign/components/FormDesignPreview.vue';
import PropertyPanel from '@/views/formDesign/components/PropertyPanel.vue';

export default defineComponent({
  name: 'FormDesign',
  components: {
    FormDesignBar,
    CardPanel,
    FormDesignPreview,
    PropertyPanel,
  },
  setup() {
    const store = useStore();
    const route = useRoute();
    const schemaCode: any = route.query?.schemaCode ?? '';
    schemaCode && store.dispatch('formDesign/getFormData', schemaCode);

    return {};
  },
});
</script>
<style lang="less" scoped>
.form-design {
  height: calc(100vh - 48px);
  background-color: @rb-background-color;
  .container {
    .flexRow(initial, flex-start);
    height: calc(100% - 40px);
    padding: 12px 32px 0;
  }
}
</style>
